<template>
  <a-modal v-model:visible="modalVisible" title="修改费用" unmount-on-close width="45vw" @close="onClose" @before-ok="onSubmit">
    <page-form :model="form" layout="vertical" ref="formRef" style="overflow: hidden">
      <page-form-item field="totalAmount" :label="feeCategoryName" size="1/2">
        <i-input-number v-model="form.totalAmount" unit="元" />
      </page-form-item>
      <page-form-item field="totalAmount" label="费用备注" size="1">
        <i-input textarea v-model="form.remark" />
      </page-form-item>
    </page-form>
  </a-modal>
</template>

<script setup name="AssetsEditFee">
  import { ref } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { getCarAssetFeeDetailDtoById, batchUpdateCarAssetFee } from '@/api/finance/costConfirm'
  // 定义 emits
  const emits = defineEmits(['ok'])

  const modalVisible = ref(false)
  const formRef = ref(null)

  const form = ref({})

  // 费用类型
  const feeCategoryName = ref('')
  const feeCategoryNameConfig = {
    1: '保养费用',
    3: '年检费用',
  }

  /**
   * 显示
   * @param {Number} id 费用ID
   * @param {Number} feeCategory 费用类型
   */
  const show = (id, feeCategory) => {
    modalVisible.value = true
    // 费用类型名称
    feeCategoryName.value = feeCategoryNameConfig[feeCategory]
    // 获取费用详情
    getCarAssetFeeDetailDtoById({ id, feeCategory }).then((res) => {
      const result = res.result
      form.value = {
        id: result.id,
        businesId: result.businesId,
        feeCategory: result.feeCategory,
        totalAmount: result.totalAmount,
        remark: result.remark,
      }
    })
  }

  // 关闭页面
  const onClose = () => {
    modalVisible.value = false
    form.value = {}
  }

  // 确认提交
  const onSubmit = (done) => {
    batchUpdateCarAssetFee(form.value)
      .then((res) => {
        console.log('res', res)
        emits('ok')
        Message.success(res.message)
        onClose()

        done(true)
      })
      .catch(() => {
        done(false)
      })
  }
  defineExpose({
    show,
  })
</script>

<style lang="less" scoped></style>
